<template>
  <div class="basemodal">
    <!-- <Modal
      v-model="show"
      :title="title"
      :width="width"
      :class-name="modalClass"
      :mask-closable="maskClosable"
      :closable="closable"
      @on-visible-change="onChange"
    >-->
    <!--将上述的属性与事件通过$attrs,$listeners引入 -->
    <Modal v-model="show" :class-name="modalClass" :width="width" v-bind="$attrs" v-on="$listeners">
      <div slot="header" class="iv-header">
        <slot name="header">
          <Icon v-show="simple" type="md-help-circle mr-15" size="30" :color="iconColor" />
          <label>{{ title }}</label>
        </slot>
      </div>
      <div :style="contentStyle">
        <slot></slot>
      </div>
      <div slot="footer" class="iv-footer">
        <slot name="footer">
          <Button :type="okType" @click="ok">{{ okText }}</Button>
          <Button :type="cancelType" @click="cancel">{{ cancelText }}</Button>
        </slot>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools, Base } from "@/model/tools.ts";
@Component
export default class BaseModal extends Tools {
  @Prop()
  private value!: boolean;
  @Prop()
  private title!: string; //!:---> 这里限制了是非空的字符串,没有传递default值即没有提示报错的信息--->原因没有在tsconfig.json 配置strictNullChecks:true
  // 第一种写法
  // @Prop({ default: false})
  // private maskClosable!: boolean;
  // 第二种写法
  @Prop({ default: true })
  private maskClosable;
  @Prop()
  private closable;
  @Prop()
  private simple!: boolean; // 父组件传递过来
  @Prop({ default: 450 })
  private width!: [string, number];
  @Prop({ default: "primary" })
  private okType!: string;
  @Prop({ default: "default" })
  private cancelType!: string;
  @Prop({ default: "确定" })
  private okText!: string;
  @Prop({ default: "取消" })
  private cancelText!: string;
  @Prop({
    default: "info",
    validator(type) {
      const types = ["info", "warning"];
      return types.indexOf(type) > -1;
    }
  })
  private type!: string;
  private clientH: number = 0;

  //===============计算属性=====================
  private get show(): boolean {
    return this.value;
  }

  private set show(value) {
    this.$emit("input", value); //派发事件,如何触发
  }

  // 暂作废
  private get showClosable() {
    return this.simple ? false : true;
  }

  private get iconColor() {
    return this.type === "info" ? "#2d8cf0" : "#ff9900";
  }

  private get modalClass() {
    return this.simple
      ? "vertical-center-modal simple"
      : "vertical-center-modal";
  }

  contentStyle() {
    //body展示高度 number
    this.$nextTick(() => {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      const dom = document.documentElement || document.body; // 兼容
      this.clientH = dom.clientHeight;
    });

    //弹窗内最大可用高度
    let maxInnerH = this.clientH - (51 + 60 + 32 + 64 + 64) + "px";
    return this.simple
      ? { minHeight: "auto", marginLeft: "45px" }
      : {
          maxHeight: maxInnerH,
          minHeight: "100px",
          overflowY: "auto"
        };
  }

  private onChange(value): void {
    this.$emit("on-visible-change", value);
  }

  private ok() {
    this.$emit("on-ok");
  }

  private cancel() {
    this.$emit("on-cancel");
  }
}
</script>

<style lang="stylus" scoped>
>>>.vertical-center-modal {
  display: flex
  align-items: center
  justify-content: center
  .ivu-modal {
    top: 0
  }
  .ivu-modal-body {
    text-align: center
  }
  .ivu-modal-header {
    line-height: 1.2
  }
}
>>>.vertical-center-modal.simple {
  .ivu-modal-header {
    border-bottom: none
  }
  .ivu-modal-footer {
    border-top: none
  }
}
.iv-header {
  display: flex
  align-items: center
  ellipsis()
  label {
    font-size: 16px
    color: #464C5B
    font-weight: 600
  }
}
.iv-footer {
  height: 35px
  display: flex
  align-items: center
  justify-content: flex-end
}
</style>
